import React, { useState, useEffect } from 'react';
import { Table, message } from "antd"
import { onTableSelect, components } from '@/utils/commonFns/commonDispatch';
import Columns from './Columns';
import Dialog from '@/components/Dialog/Dialog';
import RecordTable from './RecordTable/RecordTable';
import $http from "@/services"
import { useDispatch } from "umi"

import { useSelector } from "umi"
export default function TableList({ data, changeDiallogValue }) {
    const userInfos = JSON.parse(localStorage.getItem("userProfile"));
    const [dialogStutus, setDialogStutus] = useState(false);
    const [CurrentRecord, setCurrentRecord] = useState({});
    const dispatch = useDispatch();
    // 修改后保存执行的函数
    const handleSave = async (obj) => {
        if (obj.type === "mobile" || obj.type === "accountName") {
            const isValid = await $http.checkIsExist({
                checkData: { ...obj.updateVal }
            });
            if (isValid.data) return message.error(isValid.msg);
        }
        // 修改数据,后重新渲染
        const data = await $http.updateStaff({
            ...obj,
            updateVal: obj.updateVal[obj.type]
        });
        changeDiallogValue();
        message.success(data.msg);

    };
    const { effects } = useSelector(state => state.loading);
    // 打开其惩罚的表
    const openReviewRecord = function (record) {
        setDialogStutus(true);
        setCurrentRecord(record);
    }

    // 打开详情表
    const openDetailDialog = (id) => {
        dispatch({
            type: "staff/getDetailStaff",
            payload: id
        })
    }

    const columns = Columns({ handleSave, userInfos, openReviewRecord, openDetailDialog });


    return (
        <>
            <Table
                components={components}
                rowClassName={() => 'editable-row'}
                bordered
                rowSelection={{ onChange: (ids) => onTableSelect(ids, dispatch) }}
                scroll={{ x: true }}
                rowKey={el => el._id}
                dataSource={data}
                pagination={false}
                columns={columns}
                loading={effects["staff/initStaffContent"]}
            />
            {dialogStutus && <Dialog
                render={RecordTable}
                dialogStutus={dialogStutus}
                title={CurrentRecord?.title}
                setDialogStatus={setDialogStutus}
                CurrentRecord={CurrentRecord}></Dialog>}
        </>
    );
}
